<template>
    <div class="warp">
        <div class="apply-main" v-if="isCommit == false">
            <div class="content">
                <div class="minTitle">
                    <div>
                        <div class="flag"></div>
                        <div class="text">申请参评</div>
                    </div>
                    <el-button class="a-target" type="primary" size="small" @click.stop="windowOpen()" round>填报手册</el-button>
<!--                    <a :href="`${resourcePath}申请参评操作说明.pdf`" target="_blank" >操作手册</a>-->
                </div>
                <el-row class="form-query-box">
                    <el-col :span="20" class="form-query">
                        <el-form ref="form" :model="formQuery" size="mini">
                            <el-col :span="10">
                                <el-form-item label="岗位：" label-width="160px">
                                    <el-select size="mini" v-model="formQuery.categoryType" @change="handleCategoryType" placeholder="请选择">
                                        <el-option
                                            v-for="item in categoryTypeOptions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.name">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="参评职称：" label-width="160px">
                                    <el-select size="mini" v-model="formQuery.categoryId" placeholder="请选择">
                                        <el-option
                                            v-for="(item,i) in categoryOption"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.name+'-'+(i+1)">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </el-col>
                    <div class="query-bar">
                        <el-button type="primary" size="small" @click.stop="queryData()" round>查询</el-button>
                    </div>
                </el-row>
                <div class="main-info">
                    <h6>{{mainInfoTitle}}</h6>
                    <div class="basic-info" v-if="baseUserInfo">
                        <div class="formItem">
                            <div class="name">姓名：</div>
                            <div class="value">{{baseUserInfo.name}}</div>
                        </div>
                        <div class="formItem">
                            <div class="name">参评职称：</div>
                            <div class="value">{{formQuery.categoryId.split('-')[0]}}</div>
                        </div>
                        <div class="formItem">
                            <div class="name">部职别：</div>
                            <div class="value">{{baseUserInfo.official_rank}}</div>
                        </div>
                        <div class="formItem">
                            <div class="name">出生年月：</div>
                            <div class="value">{{baseUserInfo.birth.substring(0, 7)}}</div>
                        </div>
                        <div class="formItem">
                            <div class="name">年龄：</div>
                            <div class="value">{{baseUserInfo.age}}</div>
                        </div>
                        <div class="formItem">
                            <div class="name">人员类别：</div>
                            <div class="value">{{baseUserInfo.personnel_category}}</div>
                        </div>
                        <div class="formItem">
                            <div class="name">现专业技术职务：</div>
                            <div class="value">{{baseUserInfo.technology_title}}</div>
                        </div>
                        <div class="formItem">
                            <div class="name">现专业技术职务时间：</div>
                            <div class="value">{{baseUserInfo.appoint_time.substring(0, 7)}}</div>
                        </div>
                        <div class="formItem">
                            <div class="name">现技术等级：</div>
                            <div class="value">{{baseUserInfo.technology_level}}</div>
                        </div>
                        <div class="formItem">
                            <div class="name">现技术等级时间：</div>
                            <div class="value">{{baseUserInfo.technology_level_time.substring(0, 7)}}</div>
                        </div>
                        <div class="formItem">
                            <div class="name">入伍(工作)时间：</div>
                            <div class="value">{{baseUserInfo.enlistment_time.substring(0, 7)}}</div>
                        </div>
                        <div class="formItem">
                            <div class="name">入党(团)时间：</div>
                            <div class="value">{{(baseUserInfo.caucus_time).substring(0, 7)}}</div>
                        </div>
                        <div class="formItem">
                            <div class="name">学历：</div>
                            <div class="value">{{baseUserInfo.last_education}}</div>
                        </div>
                        <div class="formItem">
                            <div class="name">学位：</div>
                            <div class="value">{{baseUserInfo.highest_degree}}</div>
                        </div>
                    </div>
                    <div class="apply-content">
                        <template v-if="tableData.length>0">
                            <div class="content-table" v-for="(n,j) in tableData" :key="j">
                                <template v-if="typeof n.listReview == 'object'">
                                    <el-table
                                        :data="n.listReview"
                                        border
                                        size="small"
                                        style="width: 100%"
                                        header-row-class-name="table-header">
                                        <el-table-column  v-for="item in n.tableHead" :label="item" :property="item"
                                                          align="center"
                                                          :key="item">
                                            <template slot-scope="scope">
                                                <span>{{scope.row[scope.column.property]}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </template>
<!--                                <div class="text-area" v-if="asideIndex !== 1 && asideIndex !== 6">-->
                                <div class="text-area">
                                    <div class="tips-box">
                                        <label>请参考此格式对输入框内容进行填写：</label>
                                        <p v-html="n.listReviewWord"></p>
                                    </div>
                                    <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 3, maxRows: 4}"
                                        placeholder="请输入内容"
                                        resize="none"
                                        :disabled="isCommit"
                                        maxlength="200"
                                        show-word-limit
                                        v-model="n.listReviewCallback">
                                    </el-input>
                                </div>
                            </div>
                            <div class="bottomOperation"  v-if="!isCommit">
                                <el-button type="primary" size="mini" @click="save()" :loading="isSaving">保存</el-button>
                            </div>

                        </template>
                        <div v-show="mainInfoTitle && tableData.length == 0 && asideIndex" class="Information-tips">暂无信息</div>
                        <div class="fixedBottomOperation">
                            <el-button @click="hanldeReviewsPreview(true)" type="warning" size="mini" :loading="commitButtonIsLoading">{{btnText}}</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="aside-fr">
                <h6 class="moduleName">个人信息</h6>
                <div v-for="(item,i) in asideNav" :key="i"
                     @click="handleAsideActive(i,item.path)"
                     :class="{active:i == asideIndex}">
                    {{item.name}}
                </div>
            </div>
            <reviews-preview ref="reviewsPreviewCont" v-if="openPreview" @commitPreview="handleCommit" :openPreview.sync="openPreview" :resData="resData"></reviews-preview>
        </div>
        <reviews-view v-if="openPreview && isCommit" :resData="resData"></reviews-view>
    </div>
</template>

<script>
    import { findUserCategory1, findUserApplygointo,getSubmitStatus,getPersonStatus,
        saveProfessionalApplygointo,submitProfessionalApplygointo,getPreviewInfo } from '@/service/api'
    import Qs from 'qs'
    import reviewsPreview from '@/components/reviewsManage/reviewsPreview'
    import reviewsView from '@/components/reviewsManage/reviewsView'
    export default {
        name: "reviewsApply",
        data() {
            return {
                formQuery:{
                    categoryType: '', // 岗位
                    categoryId: ''    // 职称
                },
                categoryTypeOptions:[], // 岗位Options
                categoryOption:[],       // 参评职称Options
                asideNav: [
                    {name:'基本信息',path:'baseUserInfo'},
                    {name:'培训经历',path:'trainingExperience'},
                    {name:'教学工作量',path:'teachingSituation'},
                    {name:'教学质量',path:'teachingQuality'},
                    {name:'教学成果及奖励',path:'teachingReward'},
                    {name:'指导学生',path:'guideStudents'},
                    {name:'教材讲义',path:'textbookHandout'},
                    {name:'科技成果及奖励',path:'teachingAchievements'},
                    {name:'参与科研项目情况',path:'scientificProjects'},
                    {name:'专著情况',path:'monographs'},
                    {name:'学术论文',path:'academicPapers'},
                    {name:'入选人才工程计划和个人表彰奖励项目',path:'talentEngineering'},
                    {name:'奖惩情况',path:'rewardPunishment'},
                    {name:'完成任务情况',path:'completionTasks'},
                    {name:'完成其他工作简述',path:'otherWorkDescription'},
                ],
                pathActive:'baseUserInfo',
                commitButtonIsLoading:false,
                isSaving:false,
                asideIndex: 0,
                mainInfoTitle:null,
                baseUserInfo:null, //基本信息
                tableData:[],
                preserveDate:{},
                isCommit:null,
                openPreview:false,
                resData:null,
                btnText:'提交',
                resourcePath: process.env.BASE_URL

            }
        },
        created() {
            this.initOption()
        },
        components:{
            reviewsPreview,
            reviewsView
        },
        methods:{
            initOption(){
                findUserCategory1().then(res => {  //筛选查询数据
                    if (res.code == 200) {
                        this.categoryTypeOptions = res.data;
                    }
                });
                getSubmitStatus().then(res => {  //筛选查询数据
                    if (res.code == 200) {
                        console.log(res.data)
                        if(res.data == 1){
                            this.isCommit = true;
                            this.hanldeReviewsPreview()
                        }else {
                            this.isCommit = false;
                        }
                    } else {
                        console.log(res)
                    }
                });
            },
            handleAsideActive(i,path){
                // console.log(this.queryData())
                if(this.isOptionVal()){
                    this.asideIndex = i;
                    this.pathActive = path;
                    this.handleQueryData()
                }
            },
            windowOpen() {
                window.open(this.resourcePath+'申请参评操作说明.pdf')
            },
            handleCategoryType(name) {
                this.categoryTypeOptions.forEach(item=>{
                    if(item.name == name){
                        this.formQuery.categoryId = '';
                        this.categoryOption = item.childList
                    }
                })
            },
            queryData() {
                if(this.isOptionVal()){
                    this.handleQueryData()
                }
            },
            handleQueryData() {
                let categoryId = this.formQuery.categoryId.split('-')[1];
                this.getApplygointo(Number(categoryId))
            },
            isOptionVal() {
                if(this.formQuery.categoryType !== '' && this.formQuery.categoryId){
                    return true
                }else {
                    this.$message.error('请先选择岗位和参评职称！');
                    return false
                }
            },
            save() {
                let isModify = false;
                this.isSaving = true;
                if(this.preserveDate.postType){
                    delete this.preserveDate.postType;
                    delete this.preserveDate.titleType;
                }
                Object.keys(this.preserveDate).forEach((key,i)=>{
                    if(this.tableData[i].listReviewCallback != this.tableData[i].listReviewWord){
                        this.preserveDate[key] = this.tableData[i].listReviewCallback;
                        isModify = true;
                    }
                });
                if(isModify){
                    this.preserveDate.postType = this.formQuery.categoryType;
                    this.preserveDate.titleType = this.formQuery.categoryId.split('-')[0];
                    saveProfessionalApplygointo(Qs. stringify(this.preserveDate)).then(res => {
                        if (res.code == 200) {
                            console.log(res)
                            this.$message({
                                message: '保存成功！',
                                type: 'success'
                            });
                        } else {
                            console.log(res)
                        }
                        this.isSaving = false;
                    }).catch(err => {
                        console.log(err)
                        this.isSaving = false;
                    })
                }else {
                    // this.$message.error('内容未修改！');
                    this.isSaving = false;
                }
                // console.log(this.preserveDate)
            },
            hanldeReviewsPreview(data){ //预览
                if(data){
                    if(!this.isOptionVal()) return  false
                }
                let params = {
                    categoryNameType: this.formQuery.categoryId.split('-')[1],
                    intfaceType: 'a'
                };
                getPreviewInfo(Qs.stringify(params)).then(res => {  //筛选查询数据
                    if (res.code == 200) {
                        console.log(res.data)
                        if(!res.data.msg){
                            this.resData = res.data;
                            if(this.formQuery.categoryId){
                                this.resData.baseUserInfo.titleType = this.formQuery.categoryId.split('-')[0];
                            }
                            this.openPreview = true;
                            // if(this.isCommit){
                            //     this.$nextTick(() => {
                            //         this.$refs.reviewsPreviewCont.bottomOperation = false;
                            //     });
                            // }
                        }else {
                            this.$message.error(res.data.msg);
                        }
                    }
                })

            },
            handleCommit() {
                getPersonStatus().then(res => {
                    if (res.code == 200) {
                       this.commit()
                    } else {
                        console.log(res)
                    }
                })
            },
            commit() {
                if(!this.isOptionVal()) return  false
                let params = {
                    postType: this.formQuery.categoryType,
                    titleType: this.formQuery.categoryId.split('-')[0]
                };
                console.log(this.formQuery)
                this.commitButtonIsLoading = true;
                submitProfessionalApplygointo(Qs.stringify(params)).then(res => {
                    if (res.code == 200) {
                        console.log(res)
                        this.$message({
                            message: '提交成功！',
                            type: 'success'
                        });
                        this.initOption();
                        this.openPreview = false;
                    } else {
                        console.log(res)
                    }
                    this.commitButtonIsLoading = false;
                }).catch(err => {
                    console.log(err)
                    this.commitButtonIsLoading = false;
                })
            },
            sortBy(props) {
                return function(a,b) {
                    return a[props] - b[props];
                }
            },
            getApplygointo(categoryNameT){ //获取信息
                let params = {categoryNameType:categoryNameT,intfaceType:this.pathActive};
                // console.log(params)
                this.mainInfoTitle = this.asideNav[this.asideIndex].name;
                findUserApplygointo(Qs.stringify(params)).then(res => {
                    if (res.code == 200) {
                        if(res.data.baseUserInfo !== undefined){
                            this.baseUserInfo = res.data.baseUserInfo;
                            this.tableData = []
                        }else {
                            let newArray = this.objToArray(res.data)
                            newArray.forEach((item)=>{
                                if(typeof item.listReview == 'object'){
                                    item.listReview.sort(this.sortBy("attr1"));
                                    item.listReview.forEach(n=>{
                                        item.tableHead = Object.assign([],Object.keys(n).filter(v=> v !=='attr1'))
                                    });

                                }
                                if(item.listReviewWord){
                                    item.listReviewWord = item.listReviewWord.replace(/\n/g,"<br>");
                                    item.listReviewWord = item.listReviewWord.replace(/&emsp;/g,"&emsp;&emsp;");
                                }
                                // if(item.listReviewCallback == undefined || item.listReviewCallback == ''){
                                //     console.log('----'+item.listReviewCallback)
                                //     item.listReviewCallback = item.listReviewWord;
                                // }

                            });
                            this.tableData = newArray;
                            this.preserveDate = {};
                            console.log(Object.keys(res.data))
                            Object.keys(res.data).forEach(item=>{
                                this.preserveDate[item] = ''
                            })
                            console.log(this.preserveDate)
                            this.baseUserInfo = null
                        }
                    } else {
                        console.log(res)
                    }
                })
            },
            objToArray (array) {
                let arr = []
                for (let i in array) {
                    arr.push(array[i]);
                }
                return arr;
            }
        },
        mounted() {
            // console.log(this.baseUserInfo)
        },
        watch: {
            isCommit() {
                if(this.isCommit){
                    this.btnText = '预览';
                }else {
                    this.btnText = '提交'
                }

            }
        },
    }
</script>

<style scoped>
    .warp{
        width: 100%;
        min-height: calc(100% - 70px);
        position: relative;
        padding-bottom: 60px;
    }
    .apply-main{
        display: flex;
        position: relative;
        justify-content: space-between;
    }
    .content{
        width: 1px;
        flex: 1;
        min-height: 520px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
        border-radius: 5px;
        margin-right: 10px;
        position: relative;
    }
    .form-query-box {
        height: 50px;
        margin-bottom: 18px;
        position: relative;
        margin-top: 20px;
        /*overflow: hidden;*/
    }
    .query-bar >>> .el-button {
        width: 80px;
    }
    .a-target{
        width: 80px;
        text-align: right;
        margin-right: 30px;
    }
    .table-content >>> .table-header th {
        background: #E6EAEB !important;
        border: none;
    }
    .table-content >>>  .el-table--small{
        margin: 0 auto;
    }
    .table-content >>> .el-table td{
        color: #ed5765;
    }
    .aside-fr{
        width: 200px;
        min-height: 520px;
        /*max-height: 800px;*/
        /*box-sizing: border-box;*/
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
        border-radius: 5px;
        overflow: hidden;
        margin-left: 10px;
        /*position: fixed;*/
        /*top: 86px;*/
        /*bottom: 0px;*/
        /*right: 24px;*/
    }
    .aside-fr > div{
        height: 38px;
        line-height: 38px;
        text-align: center;
        color: #999999;
        flex-grow: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        font-size: 14px;
    }
    .aside-fr > div.active{
        background: #F5F8FD;
        color: #31478F;
        font-weight: bold;
        position: relative;
    }
    .aside-fr > div.active::before{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 38px;
        background: #31478F;
    }
    .moduleName {
        background: #31478F;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: bold;
        padding: 11px 0px;
        text-align: center;
        color: white;
        border-top-left-radius: 5px;
    }
    .main-info{
        width: 90%;
        margin: 30px auto 0;
    }
    .main-info h6{
        font-size:15px;
        font-weight:bold;
        color:rgba(50,72,144,1);
        line-height:23px;
        display: block;
    }
    /* 基本情况 */
    .basic-info{
        display: flex;
        flex-direction:row;
        flex-wrap: wrap;
    }
    .formItem{
        width: 33%;
        display: flex;
        flex-direction: row;
        align-items: center;
        color:#333333;
        font-size: 15px;
        margin:10px 0px 20px;
    }
    .formItem>.name{
        text-align: right;
        padding-right: 4px;
        width: 40%;
    }
    .formItem>.value{
        width: 50%;
        color:rgba(237,88,102,1);
    }
    .apply-content{

    }
    .content-table{
        margin: 13px 0px;
        overflow: hidden;
        padding-top: 24px;
        padding-bottom: 10px;
        border-top: 4px #F1F1F1 solid;
    }
    .content-table:first-child{
        border-top: none;
        padding-top: 0px;
    }
    .content-table >>> .el-table{
        border-radius: 5px 5px 0px 0px;
    }
    .content-table >>> .table-header th {
        background: #E6EAEB !important;
        border: none;
    }
    .content-table >>> .table-header th div{
        font-weight:bold !important;
        color: #333;
    }
    .text-area{
        margin-top: 6px;
    }
    .bottomOperation{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        padding-bottom: 20px;
    }
    .bottomOperation>button{
        width:120px;
    }

        /* 底部提交按钮 */
    .fixedBottomOperation{
        display: flex;
        /* display:none; */
        justify-content: center;
        background: white;
        padding: 21px 0px;
        position: fixed;
        bottom: 0px;
        left: 202px;
        z-index: 1;
        width: calc(100% - 440px);

        box-shadow: -2px -2px 15px 0px rgba(0, 0, 0, 0.2);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .fixedBottomOperation>button{
        margin: 0px 36px;
        font-size: 15px;
        padding: 7px 38px;
    }
    .Information-tips{
        text-align: center;
        font-size: 28px;
        margin-top: 50px;
    }
    .tips-box{
        font-size: 14px;
    }
    .tips-box label{
        display: block;
        margin-bottom: 6px;
    }
    .tips-box p{
        color: #999;
        margin-bottom: 4px;
    }
    .minTitle{
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #31478f0d;
        height: 52px;
        border-top: solid 1px #f3f3f3;
        position:relative;
        width: 95%;
        margin: 30px auto 0;
    }
    .minTitle>div{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .minTitle .flag{
        width: 3px;
        background: #31478F;
        margin: auto 22px;
        height: 18px;
    }
    .minTitle .text{
        color: #31478F;
        font-weight: bold;
        font-size: 17px;
    }
</style>
